<template>
        <div class="jinjimenu">

            <div class="onemenu" v-if="mtype==='01'">
               <transition name="el-zoom-in-center" v-for="(item,index) in jjt1" :key="index">

                   <div  v-show="showj" class="transition-box" @click="getjinji(index)">
                       {{item.name}}
                   </div>

               </transition>
            </div>

            <div class="twotype" v-else>
                <transition name="el-zoom-in-center" v-for="(item,index) in jjt2" :key="index">
                    <div  v-show="showj" class="transition-box" @click="getjinji(index)">{{item.name}}</div>
                </transition>
            </div>
        </div>



</template>

<script>
    import {getJinjiType} from "../../network/jinji";

    export default {
        name: "jinjimenu",
        props:{

        },
        data(){
            return{
                jjt1:[],
                jjt2:[],
                showj:false,
                mtype: '01'


            }
        },

        methods:{
          getjinji(index){
              console.log(index);
              this.$router.push(this.mtype+'0'+(index+1))

          },


        },

        created() {
            console.log('created');
            this.mtype=this.$route.params.type



        },

        destroyed() {
            console.log('destroyed');
            this.showj = false

        },
        mounted() {
            console.log('mounted');
            this.mtype=this.$route.params.type
            this.showj=true

            getJinjiType().then(res =>{

                    const data=res.data
                    for(let i=0;i<=6;i++){
                        if (i<=4){
                            this.jjt1.push(data[i])
                        }
                        else{
                            this.jjt2.push(data[i])
                        }

                    }



            })
            this.$bus.$on('jmenuclick',type=>{
                // console.log(this.showj);
                // console.log(type);
                this.mtype=type

                // console.log(this.showj);


            })


        }
    }
</script>

<style scoped>

   .transition-box{
       background-color: #ffffff;
       border-radius: 50px;
       margin: 0.3rem 0.3rem auto;
       text-align: center;
       font-size: 0.15rem;
       border:1px dotted blue;
       line-height: 0.5rem;
       box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
       font-family: FangSong;
       border-style:hidden;
   }

    .transition-box:hover{
        border-style:solid;
        cursor: pointer;
    }
</style>